<template>
  <div class="merchantList">
    <home-header>
      <p slot="title" class="title">
        <i class="icon iconfont">&#xe697;</i>
        {{ city }}
      </p>
    </home-header>
    <home-nav class="home-nav" @change="getNavData"></home-nav>
    <router-view></router-view>
    <!-- <main-part-a :hotelA="hotelA" v-if="navTitle === '酒店'"></main-part-a>
    <main-part-b :hotelB="hotelB" v-if="navTitle === '宾馆'"></main-part-b>
    <main-part-c :hotelC="hotelC" v-if="navTitle === '旅馆'"></main-part-c>
    <main-part-d :hotelD="hotelD" v-if="navTitle === '民宿'"></main-part-d>-->
  </div>
</template>

<script>
import HomeHeader from "../header/Header";
import HomeNav from "../home/components/Nav";
import { mapState } from "vuex";
// import axios from "axios";
export default {
  name: "MerchantList",
  components: {
    HomeHeader,
    HomeNav
  },
  computed: {
    ...mapState(["city"])
  },
  data() {
    return {
      navTitle: "酒店",
      hotelA: [],
      hotelB: [],
      hotelC: [],
      hotelD: []
    };
  },
  methods: {
    getNavData(title) {
      this.navTitle = title;
    }
  },
  mounted() {}
};
</script>

<style lang="stylus" scoped>
.home-nav {
  top: 0.7rem;
}

.title {
  .icon {
    position: relative;
    top: 0.1rem;
  }
}
</style>
